<template>
	<el-button @click="handleClick" type="primary">
		<slot></slot>
	</el-button>

	<div class="choose-icon-dialog-body-height">
		<el-dialog :title="title" v-model="visible">
			<div class="container">
				<div @click="clickItem(item)" class="item" v-for="(item, index) in Object.keys(ElementPlusIconsVue)"
					:key="index">
					<component :is="`el-icon-${toLine(item)}`"></component>
					<div>{{item}}</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name='chooseIcon'>
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
	import {
		useCopy
	} from '@/hooks/useCopy'
	import {
		toLine
	} from '@/utils/main'
	import {
		watch
	} from 'vue'

	let props = defineProps < {
		title: string,
		visible: boolean
	} > ()

	let emits = defineEmits(['update:visible'])

	let handleClick = () => {
		emits('update:visible', !props.visible)
	}

	let clickItem = (item: string) => {
		let text = `<el-icon-${toLine(item)} />`
		useCopy(text)
		emits('update:visible', false)
	}

	watch(() => props.visible, val => {
		emits('update:visible', val)
	})
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 70px;
	}


	svg {
		width: 1.5em;
		height: 1.5em;
		margin-bottom: 15px;
	}
</style>
